import {useRef} from 'react'
import * as THREE from 'three'
import Zjl from '../ping.module.css'
let App=({canvasRef,sceneRef,cameraRef,rendererRef,intersectsRef,lastTouchX,lastTouchY,onShow})=>{
    let handleMouseClic =(event)=>{
        let scene =sceneRef.current
        let camera = cameraRef.current
        let renderer = rendererRef.current
        
        //鼠标点击位置转换
        const touch = event.touches[0];
        lastTouchX.current=touch.clientX
        lastTouchY.current=touch.clientY
        let mouse =new THREE.Vector2(
            ((touch.clientX)/renderer.domElement.clientWidth)*2-1,
            -((touch.clientY-40)/renderer.domElement.clientHeight)*2+1
        )
        //创建Raycaster
        let raycaster =new THREE.Raycaster()
        raycaster.setFromCamera(mouse,camera)//从相机和鼠标位置设置射线

        //检查射线于场景中的物体
        let intersects =raycaster.intersectObjects(scene.children)
        intersectsRef.current =intersects[0].object
        canvasRef.current.children[0].removeEventListener('touchstart', handleMouseClic);
    }
    let draw=()=>{
        onShow(true)
        canvasRef.current.children[0].addEventListener('touchstart', handleMouseClic);
    }
    return (
        <>
            <h3 onClick={draw}  className={`${Zjl.h3}`}>选择模块</h3>
        </>
    )
}

export default App